<template>
  <el-dialog
    v-model="showDialog"
    title="绘制扇形设置"
    width="350"
    draggable
    :modal="false"
    overflow
    :close-on-click-modal="false"
    :append-to-body="true"
    :id="props.dioid"
    :style="{
      top: '15%',
      left: '6%',
      margin: '0',
      maxHeight: '700px',
      overflow: 'auto',
    }"
    :align-center="false"
    @close="onCancel"
  >
    <el-form :model="props.circularfrom" label-width="80px">
      <el-form-item label="类型:">
        <el-input v-model="props.circularfrom.Leixing"> </el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="props.circularfrom.LayerName" />
      </el-form-item>
      <div>
        <label>中心点</label>
        <el-form-item label="经度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Lon" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Lat" />
        </el-form-item>
        <el-form-item label="高度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.CenterP.Alt" />
        </el-form-item>
      </div>
      <!--  -->
      <div>
        <el-form-item label="半径">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.Radius" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="起始角度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.StartAngle" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="结束角度">
          <el-input @change="changefrom" type="number" v-model="props.circularfrom.EndAngle" />
        </el-form-item>
      </div>

      <!-- <el-form-item label="线型">
        <el-select @change="changefrom" v-model="props.circularfrom.Style.LineStyle" placeholder="请选择">
          <el-option label="实线" value="0" />
          <el-option label="虚线" value="1" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="线宽">
        <el-input-number @change="changefrom" :min="1" v-model="props.circularfrom.Style.LineWidth" />
      </el-form-item> -->
      <!-- <el-form-item label="线颜色">
        <el-color-picker @active-change="linechangecolor" @blur='changefrom'
          v-model="props.circularfrom.Style.lineColorData" show-alpha />
      </el-form-item> -->
      <el-form-item label="区域颜色">
        <el-color-picker
          @active-change="changecolor"
          @blur="changefrom"
          v-model="props.circularfrom.Style.ColorData"
          show-alpha
        />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          :autosize="{ minRows: 2 }"
          type="textarea"
          v-model="props.circularfrom.DesValue"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue'
import { ColorStyle } from '@/utils/compnt.js'
import { postAddSector, putSector } from '@/api'
import * as Cesium from 'cesium'
const { proxy } = getCurrentInstance()
const props = defineProps({
  showDrawDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: '',
  },
  circularfrom: {
    type: Object,
    default: () => {},
  },
  isapi: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['circularfromcol'])

const submitForm = async () => {
  console.log('props.circularfrom', props.circularfrom)
  // Cesium.Cartesian3.distance(Pointarr[0], Pointarr[1]);
  props.circularfrom.CenterP = {
    Alt: Number(props.circularfrom.CenterP.Alt),
    Lat: Number(props.circularfrom.CenterP.Lat),
    Lon: Number(props.circularfrom.CenterP.Lon),
  }

  let CenterP = Cesium.Cartesian3.fromDegrees(
    Number(props.circularfrom.CenterP.Lon),
    Number(props.circularfrom.CenterP.Lat),
    Number(props.circularfrom.CenterP.Alt),
  )

  // props.circularfrom.Radius = Cesium.Cartesian3.distance(CenterP, Radiuslot);
  console.log('props.circularfrom', props.circularfrom)
  try {
    if (props.isapi) {
      await putSector(props.circularfrom)
    } else {
      await postAddSector(props.circularfrom)
    }
    proxy.$mitt.emit('getsubmit')
    onCancel()
    // 可以在这里处理响应数据
  } catch (error) {
    console.error('请求失败:', error)
    // 可以在这里处理错误信息
  }
}
const onCancel = () => {
  const event = new CustomEvent('draw-sector-cancel')
  window.dispatchEvent(event)
}
//===========================

const showDialog = ref(props.showDrawDialog)
// 监听 props 变化以同步本地状态
watch(
  () => props.showDrawDialog,
  (newValue) => {
    showDialog.value = newValue
  },
)

const changecolor = (color) => {
  props.circularfrom.Style.ColorData = color
  props.circularfrom.Style.FillColor = ColorStyle(color, 1)
}
const linechangecolor = (color) => {
  props.circularfrom.Style.lineColorData = color
  props.circularfrom.Style.LineColor = ColorStyle(color, 1)
}

const changefrom = () => {
  emits('circularfromcol', props.circularfrom)
}
</script>
